<template>
	<view>
		<view class="head">
			<u--input class="search" placeholder="search" border="false" v-model="queryParams.search"
				@change="search"></u--input>
		</view>
		<view class="folder">
			<u-grid :border="false" col="3" style="width: 700rpx;padding-top: 50rpx;">
				<u-grid-item v-for="folders in folderList" style="margin-bottom: 30rpx;" @click="openFolder(folders)">
					<img :src="folders.img" alt="" style="width: 110rpx;height: 110rpx;" />
					<text class="grid-text">{{folders.file_name}}</text>
				</u-grid-item>
			</u-grid>

		</view>
	</view>
</template>

<script>
	import common from "@/api/common.js"
	export default {
		components: {

		},
		data() {
			return {
				queryParams: {
					page: 1,
					fileType: -1,
					search: '',
					fileId:''
				},
				lastPage: '',
				folderList: [],
				//图片路径
				fileSuffixes: {
					pdf: '../../static/img/pdf.png',
					excel: '../../static/img/excel.png',
					ppt: '../../static/img/ppt.png',
					txt: '../../static/img/txt.png',
					doc: '../../static/img/word.png',
					docx: '../../static/img/word.png',
					folder: '../../static/img/folder.png',
				},
			}
		},
		// 底部上拉刷新
		onReachBottom() {
			if (this.lastPage > 1 && this.queryParams.page <= this.lastPage) {
				//判断是否还有数据需要加载
				uni.showLoading({
					title: 'Loading'
				});
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
				this.queryParams.page++
				this.getList()
			} else {
				uni.showToast({
					title: 'nomoreText',
					icon: 'none'
				});
			}
		},
		onLoad() {
			this.getList()

		},
		methods: {
			// 搜索
			search() {
				uni.showLoading({
					title: 'Loading'
				});
				this.queryParams.page = 1; // 重置页码为1
				this.folderList = []; // 清空数组
				this.debounce(() => {
					this.getList()
				}, 500);
			},
			// 添加图片
			addImg(list) {
				return list.map(item => ({
					...item,
					img: this.fileSuffixes[item.file_ext]
				}));
			},
			// 列表
			getList() {
				common.getFilesList(this.queryParams).then((res) => {
					this.folderList = this.queryParams.page === 1 ? res.data.list.data : this.folderList.concat(res
						.data.list.data);
					this.folderList = this.addImg(this.folderList);
					this.lastPage = res.data.list.last_page;
					console.log(this.folderList);
				});
			},
			openFolder(e) {
				console.log(e);
				if(e.file_ext=='folder'){
					console.log('文件夹');
					this.queryParams.fileId = e.file_id
					this.getList()
				}else{
					console.log('文件');
					//打开文件
					window.location = e.external_url
				}
			}
		}
	}
</script>

<style scoped>
	.search {
		width: 700rpx;
		height: 66rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(174, 174, 174, 0.16);
		border-radius: 100rpx;
		margin: 24rpx 0 42rpx;
	}

	.tab {
		width: 700rpx;
		margin-bottom: 20rpx;
	}

	.pop {
		padding: 44rpx 28rpx 0 28rpx;
	}

	.pop .input {
		margin: 34rpx 6rpx 54rpx 0;
		padding: 0 28rpx;
		width: 696rpx;
		height: 88rpx;
		background: #EBEBEB;
		border-radius: 16rpx;
	}
	.grid-text{
		width: 100rpx;
		height: 80rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
	}
</style>